<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="ID" class="el-search-item">
              <el-input v-model="searchForm.sysCompanyId" placeholder="ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间" class="el-search-item">
              <el-date-picker v-model="checkedTime" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button v-if='hasPerm("sys:sysCompany:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%">
              <el-table-column prop="sysCompanyId" label="ID" align="center" sortable></el-table-column>
              <el-table-column prop="companyName" label="公司名" align="center" sortable></el-table-column>
              <el-table-column prop="regionPath" label="城市" align="center" sortable></el-table-column>
              <el-table-column prop="address" label="地址" align="center" sortable></el-table-column>
              <el-table-column prop="phone" label="电话" align="center" sortable></el-table-column>
              <el-table-column prop="email" label="邮箱" align="center" sortable></el-table-column>
              <!-- <el-table-column prop="fax" label="传真" align="center" sortable></el-table-column>
              <el-table-column prop="zip" label="邮编" align="center" sortable></el-table-column>
              <el-table-column prop="logo" label="logo" title="图片地址 前后台使用" align="center" sortable></el-table-column>
              <el-table-column prop="baImg1" label="法人身份证正面" align="center" sortable></el-table-column>
              <el-table-column prop="baImg2" label="法人身份证反面" align="center" sortable></el-table-column>
              <el-table-column prop="baImg3" label="营业执照" align="center" sortable></el-table-column>
              <el-table-column prop="baImg4" label="税务证" align="center" sortable></el-table-column>
              <el-table-column prop="dgyhDesc" label="对公账户" align="center" sortable></el-table-column>
              <el-table-column prop="qq" label="qq" align="center" sortable></el-table-column>
              <el-table-column prop="frontUrl" label="前台网址" align="center" sortable></el-table-column>
              <el-table-column prop="rightMsg" label="备案信息" align="center" sortable></el-table-column>
              <el-table-column prop="hotLine" label="服务热线" align="center" sortable></el-table-column> -->
              <el-table-column prop="msg" label="备注" align="center" sortable></el-table-column>
			  <el-table-column sortable label="状态" prop="state" align="center">
			     <template slot-scope="scope">{{ scope.row.state == 1 ? '激活' : '失效' }}</template>
			  </el-table-column>
              <el-table-column prop="jfDate" label="缴费日期" align="center" sortable></el-table-column>
              <el-table-column prop="jfLastTime" label="最后缴费" align="center" sortable></el-table-column>
          <el-table-column v-if='hasPerm("sys:sysCompany:list")' label="更多操作" align="center" width="250">
            <template slot-scope="scope">
			  <el-button v-if='hasPerm("sys:sysCompany:edit")' @click="czmmDialogForm.sysCompanyId=scope.row.sysCompanyId;czmmDialogVisible = true;" size="mini" type="text" icon="el-icon-edit">管理员密码</el-button>
			  <el-button v-if='hasPerm("sys:sysCompany:Admin")' @click="openCsh(scope.row)" size="mini" type="text" icon="el-icon-edit">初始化数据</el-button>
              <el-button v-if='hasPerm("sys:sysCompany:edit")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button v-if='hasPerm("sys:sysCompany:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                :current-page="pageNum" :page-sizes="[8, 15, 20]" :page-size="pageSize" :total="total">
        </el-pagination>
      </el-card>
      <!--新增用户对话框-->
      <el-dialog :title="dialog.dialogTitle" :visible.sync="dialog.visible" width="35%">
        <el-form :rules="rules" ref="sysCompanyForm" :model="sysCompanyForm" size="small" label-width="80px">
              <el-form-item prop="sysCompanyId" label="">
                <el-input v-model="sysCompanyForm.sysCompanyId" placeholder="请输入" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="companyName" label="公司名">
                <el-input v-model="sysCompanyForm.companyName" placeholder="请输入公司名" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="regionPath" label="国家城市path">
                <el-input v-model="sysCompanyForm.regionPath" placeholder="请输入国家城市path" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="address" label="地址">
                <el-input v-model="sysCompanyForm.address" placeholder="请输入地址" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="phone" label="电话">
                <el-input v-model="sysCompanyForm.phone" placeholder="请输入电话" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="email" label="邮箱">
                <el-input v-model="sysCompanyForm.email" placeholder="请输入邮箱" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="fax" label="传真">
                <el-input v-model="sysCompanyForm.fax" placeholder="请输入传真" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="zip" label="邮编">
                <el-input v-model="sysCompanyForm.zip" placeholder="请输入邮编" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="logo" label="logo">
                <el-input v-model="sysCompanyForm.logo" placeholder="请输入logo" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="baImg1" label="法人身份证正面">
                <el-input v-model="sysCompanyForm.baImg1" placeholder="请输入法人身份证正面" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="baImg2" label="法人身份证反面">
                <el-input v-model="sysCompanyForm.baImg2" placeholder="请输入法人身份证反面" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="baImg3" label="营业执照">
                <el-input v-model="sysCompanyForm.baImg3" placeholder="请输入营业执照" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="baImg4" label="税务证">
                <el-input v-model="sysCompanyForm.baImg4" placeholder="请输入税务证" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="dgyhDesc" label="对公账户信息">
                <el-input v-model="sysCompanyForm.dgyhDesc" placeholder="请输入对公账户信息" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="qq" label="qq">
                <el-input v-model="sysCompanyForm.qq" placeholder="请输入qq" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="frontUrl" label="前台网址">
                <el-input v-model="sysCompanyForm.frontUrl" placeholder="请输入前台网址" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="rightMsg" label="备案信息">
                <el-input v-model="sysCompanyForm.rightMsg" placeholder="请输入备案信息" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="hotLine" label="服务热线">
                <el-input v-model="sysCompanyForm.hotLine" placeholder="请输入服务热线" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="msg" label="备注">
                <el-input v-model="sysCompanyForm.msg" placeholder="请输入备注" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="state" label="0 1">
                <el-input v-model="sysCompanyForm.state" placeholder="请输入0 1" auto-complete="off"></el-input>
              </el-form-item>
              <el-form-item prop="jfDate" label="缴费日期">
                <el-input v-model="sysCompanyForm.jfDate" placeholder="请输入缴费日期" auto-complete="off"></el-input>
              </el-form-item>
              <!-- <el-form-item prop="jfLastTime" label="最后缴费">
                <el-input v-model="sysCompanyForm.jfLastTime" placeholder="请输入最后缴费" auto-complete="off"></el-input>
              </el-form-item> -->
        </el-form>
        <span slot="footer" class="dialog-footer">
			        <el-button @click="dialog.visible = false" size="small">取 消</el-button>
			        <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
			    </span>
      </el-dialog>
	  <el-dialog class="self_dialog" title="重置密码" :visible.sync="czmmDialogVisible" width="45%" top="5%">
		  <el-form :rules="rules" ref="czmmDialogForm" :model="czmmDialogForm" size="small" label-width="80px">
			  <el-form-item prop="passwordCz" label="密码">
				<el-input v-model="czmmDialogForm.passwordCz" placeholder="请输入密码" auto-complete="off"></el-input>
			  </el-form-item>
		  </el-form>
	      <span slot="footer" class="dialog-footer">
	          <el-button @click="czmmDialogVisible = false" size="small">取 消</el-button>
	          <el-button type="primary" @click="openDoMm()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
	      </span>
	  </el-dialog>
    </el-row>
  </div>
</template>
<script>
  export default {//vue3
    data() {
      return {
        // 表格数据
        tableData: [],
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 8,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
		czmmDialogForm: {passwordCz: '',sysCompanyId: null},
        checkedTime: '',
		czmmDialogVisible: false,
        // 查询参数
        searchForm: {sysCompanyId: null, startTime: null, endTime: null,},
        // 弹出层
        dialog: {flag: 0, dialogTitle: "", visible: false},
        // 菜单弹出层
        menuDialog: {dialogTitle: "", visible: false},
        // 表单参数
        sysCompanyForm: {
          sysCompanyId: null,
          companyName: null,
          regionPath: null,
          address: null,
          phone: null,
          email: null,
          fax: null,
          zip: null,
          logo: null,
          baImg1: null,
          baImg2: null,
          baImg3: null,
          baImg4: null,
          dgyhDesc: null,
          qq: null,
          frontUrl: null,
          rightMsg: null,
          hotLine: null,
          msg: null,
          state: null,
          jfDate: null,
          jfLastTime: null,
        },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          sysCompanyId: [{required: true,trigger: "change",message: "请输入"}],
          companyName: [{required: true,trigger: "change",message: "请输入公司名"}],
          regionPath: [{required: true,trigger: "change",message: "请输入国家城市path"}],
          address: [{required: true,trigger: "change",message: "请输入地址"}],
          phone: [{required: true,trigger: "change",message: "请输入电话"}],
          email: [{required: true,trigger: "change",message: "请输入邮箱"}],
          fax: [{required: true,trigger: "change",message: "请输入传真"}],
          zip: [{required: true,trigger: "change",message: "请输入邮编"}],
          logo: [{required: true,trigger: "change",message: "请输入logo图片地址 前后台使用"}],
          baImg1: [{required: true,trigger: "change",message: "请输入法人身份证正面"}],
          baImg2: [{required: true,trigger: "change",message: "请输入法人身份证反面"}],
          baImg3: [{required: true,trigger: "change",message: "请输入营业执照"}],
          baImg4: [{required: true,trigger: "change",message: "请输入税务证"}],
          dgyhDesc: [{required: true,trigger: "change",message: "请输入对公账户信息"}],
          qq: [{required: true,trigger: "change",message: "请输入qq"}],
          frontUrl: [{required: true,trigger: "change",message: "请输入前台网址"}],
          rightMsg: [{required: true,trigger: "change",message: "请输入备案信息"}],
          hotLine: [{required: true,trigger: "change",message: "请输入服务热线"}],
          msg: [{required: true,trigger: "change",message: "请输入备注"}],
          state: [{required: true,trigger: "change",message: "请输入0 1"}],
          jfDate: [{required: true,trigger: "change",message: "请输入缴费日期"}],
          jfLastTime: [{required: true,trigger: "change",message: "请输入最近缴费日期"}],
        },
        // 所有权限数据
        treeData: [],
        // 树形控件的属性绑定对象
        treeProps: {children: 'children', label: 'label'},
        // 默认选中的节点id值
        defKeys: [],
        // 角色id
        roleId: null
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.pageSize = val
        this.getDataList()
      },
      handleCurrentChange(val) {
        this.pageNum = val
        this.getDataList()
      },
      // 获取列表
      getDataList() {
        this.$api.sys_sysCompany.list({
          current: this.pageNum,
          size: this.pageSize,
          sysCompanyId: this.searchForm.sysCompanyId,
          startTime: this.searchForm.startTime,
          endTime: this.searchForm.endTime
        }).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
        })
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("sysCompanyForm");
        this.dialog.dialogTitle = "新增";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("sysCompanyForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.sysCompanyId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.sysCompanyForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            this.$api.sys_sysCompany.saveOrUpdate(this.sysCompanyForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            })
          }
        })
      },
      // 根据id获取信息
      getById(id) {
        this.$api.sys_sysCompany.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.sysCompanyForm.sysCompanyId = res.data.data.sysCompanyId;
            this.sysCompanyForm.companyName = res.data.data.companyName;
            this.sysCompanyForm.regionPath = res.data.data.regionPath;
            this.sysCompanyForm.address = res.data.data.address;
            this.sysCompanyForm.phone = res.data.data.phone;
            this.sysCompanyForm.email = res.data.data.email;
            this.sysCompanyForm.fax = res.data.data.fax;
            this.sysCompanyForm.zip = res.data.data.zip;
            this.sysCompanyForm.logo = res.data.data.logo;
            this.sysCompanyForm.baImg1 = res.data.data.baImg1;
            this.sysCompanyForm.baImg2 = res.data.data.baImg2;
            this.sysCompanyForm.baImg3 = res.data.data.baImg3;
            this.sysCompanyForm.baImg4 = res.data.data.baImg4;
            this.sysCompanyForm.dgyhDesc = res.data.data.dgyhDesc;
            this.sysCompanyForm.qq = res.data.data.qq;
            this.sysCompanyForm.frontUrl = res.data.data.frontUrl;
            this.sysCompanyForm.rightMsg = res.data.data.rightMsg;
            this.sysCompanyForm.hotLine = res.data.data.hotLine;
            this.sysCompanyForm.msg = res.data.data.msg;
            this.sysCompanyForm.state = res.data.data.state;
            this.sysCompanyForm.jfDate = res.data.data.jfDate;
            this.sysCompanyForm.jfLastTime = res.data.data.jfLastTime;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
          this.$api.sys_sysCompany.remove(row.sysCompanyId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList()
            }else {
              this.$message.error(res.data.msg);
            }
          })
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
	  openDoMm(){
		  this.czmmDialogVisible = false;
		  alert(this.czmmDialogForm.passwordCz);
		  alert(this.czmmDialogForm.sysCompanyId);
	  },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {
    margin-bottom: 0;
  }
  .el-card/deep/.el-card__body {
    padding: 0 10px 10px 10px !important;
  }
  .el-card/deep/.el-card__header {
    border-bottom: none !important;padding: 10px 10px !important;
  }
</style>